<template>
  <div>

    <el-row>
      <el-col :span="12">
        <h3>一、单选框</h3>
        <div>
          <h4>1.1、基本使用</h4>
          <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

          <el-dialog title="提示" :visible.sync="dialogVisible" width="40%" center>
            <el-form :model="form">
              <el-form-item label="活动名称" label-width="120px">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="活动区域" label-width="120px">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>

        </div>

      </el-col>

      <el-col :span="1">
        <div class="line"></div>
      </el-col>

      <el-col :span="11">
        <h3>二、多选框</h3>

      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  data () {
    return {

      dialogVisible: false,
      form: {},


    }
  },
  methods: {

  }
}
</script>

<style scoped>
.line {
  height: 1000px;
  margin-left: 8px;
  border-left: 1px solid black;
}
</style>